{% extends "base.html" %}

{% block content %}
<div class="card">
    <h2><i class="fas fa-road"></i> 个性化学习路径</h2>
    <p>根据您的学习水平和目标，我们为您定制了以下学习路径。</p>
    
    <div class="form-group">
        <label for="level">您的医学知识水平:</label>
        <select id="level" class="form-control">
            <option value="beginner" {% if session['user_data']['level'] == 'beginner' %}selected{% endif %}>初学者</option>
            <option value="intermediate" {% if session['user_data']['level'] == 'intermediate' %}selected{% endif %}>中级</option>
            <option value="advanced" {% if session['user_data']['level'] == 'advanced' %}selected{% endif %}>高级</option>
        </select>
    </div>
    
    <div class="form-group">
        <label>您的学习目标 (可多选):</label>
        <div>
            <input type="checkbox" id="goal-usmle" name="goals" value="usmle" 
                   {% if 'usmle' in session['user_data']['goals'] %}checked{% endif %}>
            <label for="goal-usmle">USMLE考试准备</label>
        </div>
        <div>
            <input type="checkbox" id="goal-clinical" name="goals" value="clinical" 
                   {% if 'clinical' in session['user_data']['goals'] %}checked{% endif %}>
            <label for="goal-clinical">临床技能提升</label>
        </div>
        <div>
            <input type="checkbox" id="goal-research" name="goals" value="research" 
                   {% if 'research' in session['user_data']['goals'] %}checked{% endif %}>
            <label for="goal-research">医学研究</label>
        </div>
    </div>
    
    <button class="btn" id="update-path-btn">更新学习路径</button>
    
    <div id="path-container" style="margin-top: 2rem;">
        <h3>您的学习路径</h3>
        <ol class="topic-list">
            {% for item in path %}
            <li>{{ item }}</li>
            {% endfor %}
        </ol>
    </div>
</div>

<script>
document.getElementById('update-path-btn').addEventListener('click', function() {
    const level = document.getElementById('level').value;
    const goals = Array.from(document.querySelectorAll('input[name="goals"]:checked')).map(el => el.value);
    
    fetch('/update_profile', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: `level=${level}&goals=${goals.join(',')}`
    })
    .then(response => response.json())
    .then(data => {
        if (data.status === 'success') {
            window.location.reload();
        }
    });
});
</script>
{% endblock %}